<!DOCTYPE html>
<html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	layout:decorate="~{common/layoutAdmin}">

<head>
	<meta charset="UTF-8">
	<title>课程目标达成度计算平台</title>
</head>

<body>
	<div layout:fragment="fragment_body">
		<el-row :gutter="20">
			<el-col :span="14">
				<el-button type="primary" @click="openScore(null)" >添加成绩</el-button>
				<el-table :data="scores" border highlight-current-row style="width: 100%">
					<el-table-column prop="scoreTerm" label="学期">
					</el-table-column>
					<el-table-column prop="student.studentName" label="所属学生">
					</el-table-column>
					<el-table-column prop="course.courseTitle" label="所属课程">
					</el-table-column>
					<!--<el-table-column prop="scoreTitle" label="成绩课程">
					</el-table-column>-->
					<!--<el-table-column prop="scoreValue" label="分值">
					</el-table-column>-->
					<el-table-column prop="scoreRemark" label="备注">
					</el-table-column>
					<el-table-column prop="scoreDate" label="所属日期">
					</el-table-column>
					<el-table-column prop="scoreTime" label="创建时间">
					</el-table-column>
					<el-table-column label="操作" width="160px">
						<template slot-scope="scope">
					        <el-button @click="showRecord(scope.row)" type="text" size="small">查看目标项</el-button>
					        <el-button @click="moreScore(scope.row.scoreId)" type="text" size="small">更多成绩</el-button>
					        <el-button @click="openScore(scope.row)" type="text" size="small">修改</el-button>
					        <el-popconfirm title="是否删除？" @confirm="delScore(scope.row.scoreId)" >
							  <el-button slot="reference" type="text" size="small">删除</el-button>
							</el-popconfirm>
					      </template>
					</el-table-column>
				</el-table>
			</el-col>
			<el-col :span="10">
				<!--<el-button type="primary" @click="openRecord(null)" >添加目标项</el-button>-->
				<el-button type="success" @click="reLoadScore()" >重置目标项</el-button>
				<el-table :data="records" border highlight-current-row style="width: 100%">
					<el-table-column prop="target.targetTitle" label="目标项">
					</el-table-column>
					<el-table-column prop="target.targetScore" label="目标项分数">
					</el-table-column>
					<el-table-column prop="target.targetWeight" label="目标项权重">
						<template slot-scope="scope">
							{{scope.row.target.targetWeight}}%
						</template>
					</el-table-column>
					<el-table-column prop="recordScore" label="当前打分">
					</el-table-column>
					<!--<el-table-column label="权重后单项得分">
						<template slot-scope="scope">
							{{scope.row.recordScore * (scope.row.target.targetWeight / 100)}}
						</template>
					</el-table-column>-->
					<el-table-column label="操作" width="120px">
						<template slot-scope="scope">
					        <el-button @click="openRecord(scope.row)" type="text" size="small">打分</el-button>
					        <el-popconfirm title="是否删除？" @confirm="delRecord(scope.row.recordId)" >
							  <el-button slot="reference" type="text" size="small">删除</el-button>
							</el-popconfirm>
					      </template>
					</el-table-column>
				</el-table>
			</el-col>
		</el-row>
		<!--弹框-->
		<el-dialog
		  title="成绩设置"
		  :visible.sync="scoreForm.visible"
		  width="30%">
		  <el-form :model="scoreForm" :rules="scoreRules" ref="scoreForm" label-width="100px">
			  <el-form-item label="所属学生" prop="scoreStudentId">
			    <el-select v-model="scoreForm.scoreStudentId" filterable placeholder="请选择">
				    <el-option
				      v-for="item in students"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
			    </el-select>
			  </el-form-item>
			  <el-form-item label="所属课程" prop="scoreCourseId">
			    <el-select v-model="scoreForm.scoreCourseId" filterable placeholder="请选择">
				    <el-option
				      v-for="item in courses"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
			    </el-select>
			  </el-form-item>
			  <el-form-item label="学期" prop="scoreTerm">
			    <el-input v-model="scoreForm.scoreTerm"></el-input>
			  </el-form-item>
			  <!--<el-form-item label="成绩课程" prop="scoreTitle">
			    <el-input v-model="scoreForm.scoreTitle"></el-input>
			  </el-form-item>-->
			  <!--<el-form-item label="分值" prop="scoreValue">
			    <el-input v-model="scoreForm.scoreValue"></el-input>
			  </el-form-item>-->
			  <el-form-item label="所属日期" prop="scoreDate">
			    <el-date-picker v-model="scoreForm.scoreDate" type="date" placeholder="选择日期">
			    </el-date-picker>
			  </el-form-item>
			  <el-form-item label="备注" prop="scoreRemark">
			    <el-input v-model="scoreForm.scoreRemark"></el-input>
			  </el-form-item>
			</el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="closeScore">取 消</el-button>
		    <el-button type="primary" @click="saveScore">保 存</el-button>
		  </span>
		</el-dialog>
		<!--更多学生成绩-->
		<el-dialog
		  title="更多学生成绩"
		  :visible.sync="moreVisible"
		  width="50%">
		  <el-table :data="moreStudents" border highlight-current-row style="width: 100%">
				<el-table-column prop="scoreTerm" label="学期">
				</el-table-column>
				<el-table-column prop="student.studentName" label="所属学生">
				</el-table-column>
				<el-table-column prop="course.courseTitle" label="所属课程">
				</el-table-column>
				<!--<el-table-column prop="scoreTitle" label="成绩课程">
				</el-table-column>-->
				<!--<el-table-column prop="scoreValue" label="分值">
				</el-table-column>-->
				<el-table-column prop="scoreDate" label="所属日期">
				</el-table-column>
				<el-table-column prop="scoreRemark" label="备注">
				</el-table-column>
			</el-table>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="moreVisible = false">返 回</el-button>
		  </span>
		</el-dialog>
		<el-dialog
		  title="目标设置"
		  :visible.sync="recordForm.visible"
		  width="30%">
		  <el-form :model="recordForm" :rules="recordRules" ref="recordForm" label-width="100px">
			  <el-form-item label="所属课程">
			    {{selectScore?.course.courseTitle}}
			  </el-form-item>
			  <el-form-item label="所属学生">
			    {{selectScore?.student.studentName}}
			  </el-form-item>
			  <!--<el-form-item label="目标项">
			    <el-select v-model="recordForm.recordTargetId" @change="changeTarget"  filterable placeholder="请选择">
				    <el-option
				      v-for="item in targets"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
			    </el-select>
			  </el-form-item>-->
			  <el-form-item label="目标项">
			    {{target?.targetTitle}}分
			  </el-form-item>
			  <el-form-item label="目标项分值">
			    {{target?.targetScore}}分
			  </el-form-item>
			  <el-form-item label="目标项权重">
			    {{target?.targetWeight}}%
			  </el-form-item>
			  <el-form-item label="打分" prop="recordScore">
			    <el-input v-model="recordForm.recordScore"></el-input>
			  </el-form-item>
			  <!--<el-form-item label="权重后分数">
			    {{target?.recordScore * (target?.targetWeight/100)}}
			  </el-form-item>-->
			</el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="closeRecord">取 消</el-button>
		    <el-button type="primary" @click="saveRecord">保 存</el-button>
		  </span>
		</el-dialog>
	</div>
</body>
<script type="text/javascript" layout:fragment="fragment_script">
	let vueData = {
		scores: [], 
		courses: [],
		students: [],
		groupbys: [],
		records: [],
		targets: [],
		target: null,
		selectScore: null,
		moreVisible: false,
		scoreForm:{
			visible: false,
			scoreId: '',
			scoreStudentId: '',
			scoreCourseId: '',
			scoreTerm: '',
			//scoreTitle: '',
			scoreValue: '',
			scoreRemark: '',
			scoreDate: ''
		},
		scoreRules: {
          scoreStudentId: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          scoreCourseId: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          /**scoreTitle: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],**/
          scoreTerm: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          scoreValue: [
            { required: true, message: '请输入', trigger: 'blur' },
            { required: true, validator: scoreReg, trigger: "blur" }
          ],
          scoreRemark: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          scoreDate: [
            { required: true, message: '请选择', trigger: 'blur' }
          ],
        },
        moreStudents: [],
		recordForm:{
			visible: false,
			recordId: '',  
			recordScoreId: '',  
			recordTargetId: '',  
			recordTitle: '',  
			recordScore: '', 
			recordWeight: ''
		},
		recordRules: {
          recordScoreId: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          recordTargetId: [
            { required: true, message: '请选择', trigger: 'blur' }
          ],
          recordTitle: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          recordScore: [
            { required: true, message: '请输入', trigger: 'blur' },
            { required: true, validator: scoreReg, trigger: "blur" }
          ],
          recordWeight: [
            { required: true, message: '请输入', trigger: 'blur' },
            { required: true, validator: scoreReg, trigger: "blur" }
          ]
        }
	}
	let vueMethods = {
		getScores() {
			let that = this
			postRequst('/admin/getScores', that.query).then(function (resp) {
				that.scores = resp.rows
				if(resp.rows && resp.rows.length > 0){
					that.selectScore = resp.rows[0]
					that.getRecords()
					that.getTargets(that.selectScore.scoreCourseId)
				}
			})
		},
		getCourses() {
			let that = this
			postRequst('/admin/getCourses', {}).then(function (resp) {
				if(resp.rows && resp.rows.length > 0){
					for(course of resp.rows){
						that.courses.push({
							label: course.courseTitle,
							value: course.courseId
						})
					}
				}
			})
		},
		getStudent() {
			let that = this
			postRequst('/admin/getStudents', {active: 1}, true).then(function (resp) {
				if(resp.rows && resp.rows.length > 0){
					for(student of resp.rows){
						that.students.push({
							label: student.studentName,
							value: student.studentId
						})
					}
				}
			})
		},
		getTargets(courseId) {
			let that = this
			postRequst('/admin/getTargets', {courseId: courseId}, true).then(function (resp) {
				if(resp.rows && resp.rows.length > 0){
					that.targets = []
					for(target of resp.rows){
						that.targets.push({
							label: target.targetTitle,
							value: target.targetId
						})
					}
				}
			})
		},
		getTarget(targetId) {
			let that = this
			postRequst('/admin/getTarget', {targetId: targetId}, true).then(function (resp) {
				that.target = resp
			})
		},
		getGroupby() {
			let that = this
			postRequst('/admin/getScoreGrouby', {}).then(function (resp) {
				that.groupbys = resp
			})
		},
		openScore(row){
			let that = this
			if(row){
				that.scoreForm.scoreId = row.scoreId
				that.scoreForm.scoreStudentId = row.scoreStudentId
				that.scoreForm.scoreCourseId = row.scoreCourseId
				that.scoreForm.scoreTitle = row.scoreTitle
				that.scoreForm.scoreTerm = row.scoreTerm
				that.scoreForm.scoreValue = row.scoreValue
				that.scoreForm.scoreRemark = row.scoreRemark
				that.scoreForm.scoreDate = row.scoreDate
			}else{
				that.scoreForm.scoreId = ''
				that.scoreForm.scoreStudentId = ''
				that.scoreForm.scoreCourseId = ''
				that.scoreForm.scoreTitle = ''
				that.scoreForm.scoreTerm = ''
				that.scoreForm.scoreValue = ''
				that.scoreForm.scoreRemark = ''
				that.scoreForm.scoreDate = ''
			}
			that.scoreForm.visible = true
		},
		closeScore() {
			this.$refs['scoreForm'].resetFields();
			this.scoreForm.visible = false
		},
		saveScore() {
			let that = this
			this.$refs['scoreForm'].validate((valid) => {
				if (valid) {
					postRequst('/admin/saveScore', that.scoreForm).then(function (resp) {
						if(resp.status == 0){
							that.getScores()
							that.scoreForm.visible = false
							that.$message({message: resp.msg, type: "success"});
						}else{
							that.$message({message: resp.msg, type: "error"});
						}
					})
				}
			});
		},
		reLoadScore() {
			let that = this
			this.$confirm('重新加载将会重置原有的打分记录, 是否继续?', '提示', {
	          confirmButtonText: '确定',
	          cancelButtonText: '取消',
	          type: 'warning'
	        }).then(() => {
	          	postRequst('/admin/reLoadScore', {scoreId: that.selectScore.scoreId}, true).then(function (resp) {
					if(resp.status == 0){
						that.getRecords()
						that.$message({message: resp.msg, type: "success"});
					}else{
						that.$message({message: resp.msg, type: "error"});
					}
				})
	        }).catch(() => {});
		},
		delScore(scoreId) {
			let that = this
			postRequst('/admin/delScore', {scoreId: scoreId}, true).then(function (resp) {
				if(resp.status == 0){
					that.getScores()
					that.$message({message: resp.msg, type: "success"});
				}else{
					that.$message({message: resp.msg, type: "error"});
				}
			})
		},
		moreScore(scoreId){
			let that = this
			that.moreVisible = true
			postRequst('/admin/getMoreScores', {scoreId: scoreId}, true).then(function (resp) {
				if(resp.rows && resp.rows.length > 0){
					that.moreStudents = resp.rows
				}
			})
		},
		getRecords() {
			let that = this
			that.recordForm.recordScoreId = that.selectScore.scoreId
			postRequst('/admin/getScoreRecords', {scoreId: that.selectScore.scoreId}, true).then(function (resp) {
				that.records = resp.rows
			})
		},
		showRecord(row){
			let that = this
			that.selectScore = row
			that.getRecords()
			that.getTargets(row.scoreCourseId)
		},
		openRecord(row){
			let that = this
			if(!that.selectScore){
				that.$message({message: '请先选择成绩', type: "warning"});
				return ;
			}
			if(row){
				that.recordForm.recordId = row.recordId
				//that.recordForm.recordScoreId = row.recordScoreId
				that.recordForm.recordTargetId = row.recordTargetId
				that.recordForm.recordScore = row.recordScore
				that.getTarget(row.recordTargetId)
			}else{
				that.recordForm.recordId = ''
				//that.recordForm.recordScoreId = ''
				that.recordForm.recordTargetId = ''
				that.recordForm.recordScore = ''
			}
			that.recordForm.visible = true
			
		},
		closeRecord() {
			this.$refs['recordForm'].resetFields();
			this.recordForm.visible = false
		},
		saveRecord() {
			let that = this
			this.$refs['recordForm'].validate((valid) => {
				if (valid) {
					if(that.recordForm.recordScore > that.target.targetScore){
						that.$message({message: '打分分数不能高于目标分值', type: "error"});
						return false
					}
					postRequst('/admin/saveScoreRecord', that.recordForm).then(function (resp) {
						if(resp.status == 0){
							that.getScores()
							that.getRecords()
							that.recordForm.visible = false
							that.$message({message: resp.msg, type: "success"});
						}else{
							that.$message({message: resp.msg, type: "error"});
						}
					})
				}
			});
		},
		delRecord(recordId) {
			let that = this
			postRequst('/admin/delScoreRecord', {recordId: recordId}, true).then(function (resp) {
				if(resp.status == 0){
					that.getRecords()
					that.getScores()
					that.$message({message: resp.msg, type: "success"});
				}else{
					that.$message({message: resp.msg, type: "error"});
				}
			})
		},
		changeTarget(nowVal){
			let that = this
			that.getTarget(nowVal)
		}
	}
	function vueCreated() {
		let that = this
		that.getScores()
		that.getStudent()
		that.getCourses()
		that.getGroupby()
	}

	// 初始化VUE
	new Vue({
		...mainApp, ...{
			created: vueCreated,
			data: {...mainApp.data, ...vueData},
			methods: {...mainApp.methods, ...vueMethods}
		}
	});
</script>

</html>